<template>
  <div class="box">
    <div class="topboxone">
      <el-button type="primary" @click="addbutton">新增问卷</el-button>
    </div>
    <div>
      <el-table :data="datalist" border style="width: 100%">
        <el-table-column prop="date" label="记录时间" />
        <el-table-column prop="name" label="问卷类型" />
        <el-table-column prop="name" label="问卷评分" />
        <el-table-column prop="date" label="备注" />
      </el-table>
    </div>

    <el-dialog v-model="dialogVisible" title="新增问卷" width="600" :before-close="handleClose">
      <el-form :model="form" label-width="auto" style="max-width: 600px" ref="ruleFormRef">
        <el-form-item label="上传问卷 ">
          <el-upload v-model:file-list="fileListzy" class="upload-demo" multiple :limit="1" :http-request="uploadFile">
            <el-button type="primary">上传问卷</el-button>
            <template #tip>
              <div class="el-upload__tip"></div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="记录时间" prop="Datevalue">
          <el-date-picker v-model="form.Datevalue" type="date" value-format="YYYY-MM-DD" />
        </el-form-item>

        <el-form-item label="问卷类型" prop="wjlx">
          <el-input v-model="form.wjlx" />
        </el-form-item>

        <el-form-item label="备注" prop="bz">
          <el-input v-model="form.bz" />
        </el-form-item>
        <el-form-item>
          <div class="savrnutton">
            <el-button type="primary" @click="onSubmit(ruleFormRef)">保存</el-button>
            <el-button @click="clearbutton(ruleFormRef)">清空</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
const fileListzy = ref([]);
let datalist = ref([
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "San Francisco",
    address: "3650 21st St, San Francisco",
    zip: "CA 94114",
    family: [
      {
        name: "Jerry",
        state: "California",
        city: "San Francisco",
        address: "3650 21st St, San Francisco",
        zip: "CA 94114"
      },
      {
        name: "Spike",
        state: "California",
        city: "San Francisco",
        address: "3650 21st St, San Francisco",
        zip: "CA 94114"
      },
      {
        name: "Tyke",
        state: "California",
        city: "San Francisco",
        address: "3650 21st St, San Francisco",
        zip: "CA 94114"
      }
    ]
  }
]);
let dialogVisible = ref(false);
const ruleFormRef = ref(null);
const size = ref("default");

const form = ref({});
const onSubmit = formEl => {
  console.log(form.value);
  dialogVisible.value = false;
};
const clearbutton = formEl => {
  if (!formEl) return;
  formEl.resetFields();
};
const handleClose = () => {
  dialogVisible.value = false;
};
let addbutton = () => {
  form.value = {};
  dialogVisible.value = true;
};
const seebutton = e => {
  console.log(e);
  dialogVisible.value = true;
};
let uploadFile = val => {
  const fd = new FormData();
  fd.append("functionId", val.file.uid);
  fd.append("moduleId", 19);
  fd.append("upfile", val.file);
};
</script>
<style scoped>
.box {
  color: #606266;
}
.topbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.savrnutton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.topboxone {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
</style>
